<template>
	<div class="train-list maxW">
		<router-link v-if="1"  to="/train/manage/index"  class="link-entrance fr">培训管理</router-link>
		<div class="i_courseBox">
		<!-- 	<div class="i_courseSub clear" v-if="0">
			<span>地区</span>
			<div class="i_courseLs clear">
				<label class="i_active" v-for="item of regionList" :key="item.id" @change="getSchool(item.id)">
					<input type="radio" name="course">
					<span>{{item.name}}</span>
				</label>
			</div>
		</div>
		
		<div class="i_courseSub clear" v-if="0">
			<span>学校</span>
			<div class="i_courseLs clear">
				<label v-for="item of schoolList" :key="item.id" @change="getOrg(item.id)" >
					<input type="radio" name="course1">
					<span>{{item.name}}</span>
				</label>
			</div>
		</div> -->
			<!--  -->
			<div class="i_courseSub clear">
				<span>学段</span>
				<div class="i_courseLs clear">
					<label v-for="(item, index) of orgList" :key="item.id" @change="getOrgLevel3(index,item.id)">
						<input type="radio" name="course2" :checked="index === orgChecked ? true : false">
						<span>{{item.name}}</span>
					</label>
				</div>
			</div>

			<!--  -->
		<!-- 	<div class="i_courseSub clear">
				<span>年级</span>
				<div class="i_courseLs clear">

					<label v-for="item of orgLevel3" @change="getSubjectList(item.id)">
						<input type="radio" name="course3">
						<span>{{item.name}}</span>
					</label>
				</div>
			</div> -->

			<!--  -->
			<div class="i_courseSub clear">
				<span>科目</span>
				<div class="i_courseLs clear">
					<label v-for="(item, index) of subjectList" :key="item.id"  @change="subjectChange(index,item.id)">
						<input type="radio" name="course4" :checked="index == subjectChecked ? true : false">
						<span>{{item.name}}</span>
					</label>
				</div>
			</div>

			<!--  -->
			<div class="i_courseSub clear" v-if="0">
				<span>年级</span>
				<div class="i_courseLs clear">
					<label>
						<input type="radio" name="course3" checked>
						<span>全部</span>

					</label>
					<label>
						<input type="radio" name="course3">
						<span>一年级</span>
					</label>
					<label class="i_active">
						<input type="radio" name="course3">
						<span>二年级</span>
					</label>
					<label>
						<input type="radio" name="course3">
						<span>三年级</span>
					</label>
					<label>
						<input type="radio" name="course3">
						<span>四年级</span>
					</label>
					<label>
						<input type="radio" name="course3">
						<span>五年级</span>
					</label>
					<label>
						<input type="radio" name="course3">
						<span>六年级</span>
					</label>
				</div>
			</div>
		</div>

		<!--  -->
		<div class="i_train_sort clear">
			<label @change="get_trainList(sort = 'time')">
				<input type="radio" name="th" checked>
				<span>最新</span>
			</label>
			<label @change="get_trainList(sort ='hot')">
				<input type="radio" name="th">
				<span>人气</span>
			</label>
		</div>
		<!--  -->
		<div class="i_groupBox">
			<ul>
				<li class="i_groupLs box" v-for="item of train_list" :key="item.trainid">
					<div class="i_groupLs_img"  v-if="item.date_type === '未开始' " @click="remind()">
						<img :src="BASE_URL + item.picture" :onerror="errorImg">
					</div>

					<div class="i_groupLs_img"  v-else  @click="get_partake(item.trainid)">
						<img :src="BASE_URL + item.picture" :onerror="errorImg">
					</div>

					<!-- <router-link  @click="get_partake(item.trainid)"
					:to="{path: '/train/teacher-detail', query:{trainid: item.trainid}}" class="i_groupLs_img">
						<img :src="BASE_URL + item.picture" :onerror="errorImg">
					</router-link> -->

					<div class="i_groupLs_if">
						<p v-if="item.date_type === '未开始' " @click="remind()">{{item.name}}</p>
						
						<div class="i_groupLs_txt"  v-else @click="get_partake(item.trainid)">
							{{item.name}}
						</div>
			<!-- 			<router-link  v-else
						:title="item.name" @click="get_partake(item.trainid)"
						:to="{path: '/train/teacher-detail', query:{trainid: item.trainid}}">{{item.name}}</router-link> -->

						<div class="i_train_time">
							<p><i>开始</i>{{item.start_time.substring(0,16)}}</p>
							<p><i>结束</i>{{item.end_time.substring(0,16)}}</p>
						</div>
						<div class="i_hotType clear">
							<a href="javascript:;">
								<span>
									<img :src="BASE_URL + item.avatar_path">
								</span>
								{{item.createname}}
							</a>
							<span>{{item.study_user_count}}人学习</span>
						</div>
					</div>
				</li>
				
			</ul>
			<!--  -->
			<div class="pageBox">
				<el-pagination v-if="total_number > page_size"
				    @current-change="change_page"
				    :page-size="page_size"
				    :current-page="page_index"
				    layout="prev, pager, next"
				    :total="total_number">
				  </el-pagination>
			</div>
		</div>

		<!--  -->
		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
	</div>
</template>
   
<script>

	export default{
		data(){
			return {
				page_index: 1,
				page_size:  8,
				total_number: 0,
				placeholder: false,
				sort:'time',
				zoneid: null,
				schoolid: null,
				study_section_id:null,
				grade_id: null,
				subject_id: null,
				train_list: [],
				orgList: [],
				orgLevel3: [],
				subjectList: [],
				regionList: [],
				schoolList: [],
				errorImg: 'this.src="' + require('../../../../public/images/image_loding.png') + '"',
				checked: false,
				subjectChecked: 0,
				orgChecked: 0,
				partakeUser: null,
			}
		},
		created(){
			// this.getToppostion();
			this.get_trainList();
			this.getOrg()
		},
		watch:{
			$route: {
				handler(a, b){
					console.info(a)
				},
				deep: true
			},
		},
		methods: {
			//判断该用户是否参加了培训
			get_partake(trainid){
				console.info(trainid)
				let success = (res =>{
					let data = res.data;
					this.partakeUser = data

					if (this.partakeUser != '') {
						this.$router.push({path: '/train/teacher-detail', query:{trainid: trainid}})
					}else{
						this.$message.error('您尚未被邀请，可联系创建者加入');
					}
				});

				this.$ajax({
					url: 'api/train/check_train_user',
					method: 'get',
					params: {
						train_id: trainid,
						user_id: this.$g.user_id
					},
					func: {success: success}
				});
			},
			remind(){
				this.$message({
					message: '培训时间还没开始，暂无法查看',
					type: 'warning'
				});
			},
			//列表
			get_trainList(){
				let success = ( res =>{
					let data = res.data;
					this.train_list = data.data;
					this.total_number = parseInt(data.data_sum)

					// this.loading = false
					this.train_list.length === 0
					? this.placeholder = true
					: this.placeholder = false
				});


				this.$ajax({
					url: 'api/train/train_list',
					method: 'get',
					params: {
						user_id: this.$g.user_id,
						page_index: this.page_index,
						page_size: this.page_size,
						order_type: this.sort,
						// zone: this.zoneid,
						// school: this.schoolid,
						study_section_id: this.study_section_id,
						grade_id: this.grade_id,
						subject_id: this.subject_id
					},
					func: {success: success}
				})

			},
			change_page(val){
				this.page_index = val;
				this.get_trainList()
			},
			/*// 获取最高级地区（无参数）
			getToppostion() {
				let params = {};
				const success = (res => {
					this.toppostionList = res.data;
					this.getRegion(res.data[0].id)
				})
				this.$ajax.get('api/level/get_topposition', { func: { success: success } })
			},
			//获取地区
			getRegion(regionid){
				let params = {id: regionid};
				let success = (res =>{
					this.regionList = res.data;
					// this.regionList.unshift({id: 0, name: '全部'})
					this.zoneid = this.regionList[0].id
					this.getSchool(this.regionList[0].id)
					this.get_trainList();
				});
				this.$ajax.get('api/level/get_position_by_parent_id',{params: params, func:{success: success}})
			},
			// 根据地区 获取学校  教育局 
			getSchool(regionid){
				this.zoneid = regionid
				let params = {
					id: regionid === regionid ? regionid : null,

					server_type: 1 //1学校  2教育局
				};

				let success = (res =>{
				
					this.schoolList = res.data
					if ( res.data.length === 0) {
						this.schoolList = []
						this.orgList = []
						this.subjectList = []
						return
					}
					this.get_trainList();
				});

				this.$ajax.get('api/level/get_school_by_postionid', {params: params, func: {success: success}})
			},*/
			//获取学段
			getOrg() {
				let params = {
					level: 2,
					pid: 1,
					direction: 'balance',
					is_diffplat: 1
				};
				const success = (res => {
						
					this.orgList = res.data;

					this.orgList.unshift({id:0, name: '全部'})

					// this.orgList[0].id === 0 ? this.checked = true : this.checked = false

					this.getOrgLevel3(this.orgList[0].id)

					this.study_section_id =  0,
					this.get_trainList()
				})
				this.$ajax.get('api/org/org', { params: params, func: { success: success } })
			},
			//获取年级
			getOrgLevel3(index,study_section_id){
				this.orgChecked = index;
				let params = {
					level: 3,
					pid: study_section_id,
					direction: 'balance',
				};
				const success = (res => {
					this.orgLevel3 = res.data;
					this.orgLevel3.unshift({id:0, name: '全部'})
					this.getSubjectList(this.orgLevel3[0].id)
					this.study_section_id = study_section_id,
					this.get_trainList()
				})
				this.$ajax.get('api/org/org', { params: params, func: { success: success } })
			},
			//获取学科
			getSubjectList(orgid) {
				let params = {
					type: 2,
					subject_id: orgid === orgid ? orgid : null,
					status:1,
				}
				const success = (res => {
					this.subjectList = res.data;
					this.subjectList.unshift({id:0, name: '全部'})
					this.grade_id = orgid;
					this.get_trainList()
				})
				this.$ajax.get('api/cate/subject', { params: params, func: { success: success } })
			},
			subjectChange(index,id) {
				this.subjectChecked = index;
				this.subject_id = id;
				this.get_trainList();
			}
		}
	}
</script>

<style>
	.i_groupLs_txt{
		font-size: 14px;
		line-height: 20px;
		padding-top: 13px;
		display: block;
		cursor: pointer;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.i_groupLs_txt:hover{
			color: #348efc;
	};
</style>